import React, { useEffect, useState } from "react";
import style from "./index.module.scss";
import { Avatar, Skeleton } from "antd";
import { IPostData } from "@/app/PostContentView/page";
import { TVideoData } from "@/app/Course/page";
import { SEVER_URL } from "@/configs/constant";
import parse from "html-react-parser";
import { TUserInfo } from "@/app/VedioContentView/page";
import { getUserById } from "@/api";

interface IDetails {
  data?: IPostData;
  vedioData?: TVideoData;
  userInfo?: TUserInfo;
  active?: boolean;
  courseUrl?: string;
  courseDesc?: string;
}
const Details = (props: IDetails) => {
  const { data, vedioData, active, courseUrl, userInfo, courseDesc } = props;
  const [isPlay, setIsPlay] = useState(false);

  const togglePlay = () => {
    setIsPlay(!isPlay);
  };

  return (
    <div>
      <div className={style["header"]}>
        <h2>{data?.postTitle || vedioData?.subjectName}</h2>
        <p className={style["info"]}>
          <Avatar
            src={`${SEVER_URL}${userInfo?.userHead || data?.userHead}`}
          ></Avatar>
          <span className={style["text"]}>
            {data?.postAuthorName || userInfo?.userName}
          </span>
          <span style={{ color: "#d3d3d3" }}>|</span>
          <span className={style["text"]}>
            更新日期：{data?.updateTime || vedioData?.updateTime}
          </span>
        </p>
      </div>
      <div className={style["content"]}>
        {data?.postContent && parse(data?.postContent)}
        {vedioData?.videoList && vedioData?.videoList.length > 0 ? (
          <video
            src={
              courseUrl
                ? `${SEVER_URL}${courseUrl}`
                : `${SEVER_URL}${vedioData?.videoList[0].videoLink}`
            }
            controls
            autoPlay={isPlay}
            style={{ width: "100%", height: "500px", objectFit: "cover" }}
            onChange={togglePlay}
          >
            你的浏览器不支持 video 标签。
          </video>
        ) : (
          <Skeleton.Node
            active={active}
            style={{
              width: "100%",
              backgroundColor: "#bfbfbf",
            }}
          ></Skeleton.Node>
        )}
      </div>
      {vedioData && (
        <div
          className={style["description"]}
          dangerouslySetInnerHTML={{
            __html: courseDesc
              ? courseDesc
              : (vedioData?.videoList[0].richText as string | TrustedHTML),
          }}
        ></div>
      )}
    </div>
  );
};
export default Details;
